<template>
	<image class="mescroll-totop" @click="toTop" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/mescroll-totop.png"
		:class="[value ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': mOption.safearea}]">
	</image>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			value: false
		},
		methods: {
			toTop() {
				this.$emit('toTopClick')
			},
		}
	}
</script>

<style scoped lang="scss">
	/* 回到顶部的按钮 */
	.mescroll-totop {
		z-index: 9990;
		position: fixed !important;
		/* 加上important避免编译到H5,在多mescroll中定位失效 */
		right: 20rpx;
		bottom: 120rpx;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.5s;
		/* 过渡 */
		margin-bottom: var(--window-bottom);
		/* css变量 */
	}

	/* 适配 iPhoneX */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.mescroll-totop-safearea {
			margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
			/* window-bottom + 适配 iPhoneX */
			margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
		}
	}

	/* 显示 -- 淡入 */
	.mescroll-totop-in {
		opacity: 1;
	}

	/* 隐藏 -- 淡出且不接收事件*/
	.mescroll-totop-out {
		opacity: 0;
		pointer-events: none;
	}
</style>
